<template>
  <basic-container class="noticeCon">
    <p class="total">
      （{{article.current}}/{{article.total}}）
    </p>
    <div class="pageAll">
      <p class="noticeTitle">{{content.title}}</p>
      <p class="noticeTime">{{content.issuingTime}}</p>
      <div class="noticeCont" v-html="content.cont">
      </div>
    </div>
    <div class="bottom">
<!--      <i class="myfont icon-huojian"></i>-->
      <p class="fileP">
        <span class="activeColor" @click="downIt"><i class="el-icon-download"></i>{{content.title}}</span>
        <el-checkbox v-model="article.isRead">已阅读该通知，下次不在提醒</el-checkbox>
      </p>
      <p class="butBox">
        <el-button type="primary" round @click="preArticle" :disabled="this.article.current==1">上一篇</el-button>
        <el-button type="primary" round @click="nextArticle" :disabled="this.article.current==this.article.total">下一篇</el-button>
      </p>
    </div>
  </basic-container>
</template>
<script>
  export default {
    data(){
      return{
        article:{
          current:1,
          total:2,
          isRead:false,
          content:[
            {
              title:'关于版本更新的通知',
              issuingTime:'2021-07-19 15:34:55',
              cont:'<p>1、修复了部分页面全选功能无效的问题</p>'+
                '<p>2、优化了系统性能</p>',
            },{
              title:'关于版本更新的通知',
              issuingTime:'2021-07-19 15:34:55',
              cont:'' +
                '<p>1、货物到货确认——选择性签收性能优化</p>' +
                '<p>2、货物到货确认——整车撤销性能优化</p>' +
                '<p>3、代收款发放——银行付款现在无发货人也可保存收款方信息，添加保存并打印按钮</p>' +
                '<p>4、中转管理——中转单管理——合同打印字段修改、合计公式修改</p>' +
                '<p>5、业务报表——业务员统计表同业务员同月数据合并</p>'
            }
          ]
        },
        content: {
          cont: '<p>1、修复了部分页面全选功能无效的问题</p>'+
          '<p>2、优化了系统性能</p>',
          title:'关于版本更新的通知',
          issuingTime:'2021-07-19 15:34:55',
        }
      }
    },
    watch:{

    },
    methods:{
      downIt(){
        alert('再等等...')
      },
      preArticle(){
        this.article.current--
        this.content = this.article.content[this.article.current-1]
      },
      nextArticle(){
        this.article.current++
        this.content = this.article.content[this.article.current-1]
      },
    }
  }
</script>
<style lang="scss" scoped>
.basic-container.noticeCon{
  height: 100%;
  .total{
    position: absolute;
    margin: 0;
    top: 0px;
    left:98px;
    color: #fff;
    line-height: 48px;
  }
  .pageAll{
    overflow: auto;
    height: calc(100% - 80px);
    .noticeTime{
      text-align: center;
    }
    .noticeTitle{
      font-size: 16px;
      font-weight: 600;
      color: #000;
      text-align: center;
    }
  }
  .noticeCont{
    padding-bottom: 80px;
    /deep/ p{
      text-indent: 2em;
      margin: 0;
      line-height: 24px;
    }
  }
  .bottom{
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 80px;
    text-align: right;
    padding: 10px 20px;
    box-sizing: border-box;
    border-top: 1px solid #eee;
    background: #fff;
    border-radius: 6px;
    .fileP{
      margin: 0;
      display: flex;
      justify-content: space-between;
      margin-bottom: 12px;
      >span{
        cursor: pointer;
      }
      .el-checkbox__label{}
    }
    .el-button{
      height: 28px;
      line-height: 28px;
      padding: 0 24px;
    }
    .downBtn{
      text-align: right;
    }
    .butBox{
      margin: 0 auto;
      display: flex;
      width: 50%;
      justify-content: center;
    }
  }
}
</style>
